<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--消息提醒-->
            <el-alert
                    title="添加商品"
                    type="info"
                    show-icon
                    :closable="false">
            </el-alert>

            <!--步骤组件-->
            <!---->
            <!--居中效果-->
            <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!--tab栏区域 :el-tab-pane必须是el-tabs上的子节点-->
            <!--:tab-position="'left'" 设置tab栏为左右结构的tab栏-->
            <!--表单:llabel-position="top"设置label在文本框的上方-->
            <!--before_leave 切换标签之前的钩子,若返回false或者返回promise且被reject,则阻止切换-->
            <el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="100px" label-position="top">
                <el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="beforeTabLeave" @tab-click="tabClicked">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="addForm.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model="addForm.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model="addForm.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model="addForm.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_cat">
                            <!--选择商品分类的联级选择框-->
                            <el-cascader
                                    v-model="addForm.goods_cat"
                                    :options="cateList"
                                    :props="cateProps"
                                    @change="handleChange"></el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <!--在参数信息,商品属性面板中添加循环生成生成结构的代码-->
                    <el-tab-pane label="商品参数" name="1">
                        <!--渲染表单item项-->
                        <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
                            <!--使用数组渲染复选框-->
                            <el-checkbox-group
                                    v-model="item.attr_vals">
                                <el-checkbox v-for="(val,i) in item.attr_vals" :label="val" :key="i" border>{{val}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">
                        <!--渲染商品属性-->
                        <el-form-item v-for="item in onlyTableData" :key="item.attr_id" :label="item.attr_name">
                            <el-input v-model="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>

                    <el-tab-pane label="商品图片" name="3">
                        <!--商品图片上传
                            :action:制定图片上传的api接口
                            :on-preview : 当点击图片的时候会触发该事件进行预览操作，处理图片
                            :on-success: 当用户点击上传图片并成功上传的时候触发
                            list-type: 设置预览图片的方式
                            :headers:设置上传图片的请求头
                        -->
                        <el-upload
                                class="upload-demo"
                                :action="uploadURL"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :on-success="handleSuccess"
                                :headers="headerObj"
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">
                        <!--富文本编辑器组件-->
                        <quill-editor v-model="addForm.goods_introduce" class="ql-editor">

                        </quill-editor>
                        <!---添加商品按钮-->
                        <div>
                            <el-button type="primary" @click="btnAdd">添加商品</el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>

        <!--预览图片对话框-->
        <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
            <img :src="previewPath" alt="" class="previewImg">
        </el-dialog>
    </div>

</template>

<script>
    //官方推荐将lodash导入为 _
    import _ from 'lodash'
    export default {
        data(){
            return {
                //当前选中的索引
                activeIndex : '0',
                //当前的级联选择器的分类数据
                cateList : [],
                //动态参数列表
                manyTableData : [],
                //静态参数列表
                onlyTableData : [],
                //添加表单的数据
                addForm : {
                    goods_name : '',
                    goods_price : 0,
                    goods_weight : 0,
                    goods_number : 0,
                    goods_cat : [],
                    //上传图片数组
                    pics : [],
                    //商品详情介绍
                    goods_introduce : '',
                    attrs : []
                },
                //上传图片的url地址
                uploadURL : 'http://127.0.0.1:8888/api/private/v1/upload',
                //图片上传组件的headers请求头对象
                headerObj:{Authorization:window.sessionStorage.getItem('token')},
                //保存预览图片的url地址
                previewPath : '',
                //控制预览图片对话框的显示和隐藏
                previewVisible : false,
                cateProps:{
                    value : 'cat_id',
                    label : 'cat_name',
                    children : 'children',
                    expandTrigger : 'hover'
                },
                addFormRules:{
                    goods_name : [
                        {required:true,message:'请输入商品名称',trigger:'blur'}
                    ],
                    goods_price: [
                        {required: true , message : '请输入产品价格',trigger:'blur'}
                    ],
                    goods_weight : [
                        {required : true , message : '请输入产品重量',trigger:'blur'}
                    ],
                    goods_number : [
                        {required: true , message : '请输入产品数量' , trigger : 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getCateList();
        },
        methods:{
            //获取分类
            async getCateList(){
                const {data : res} = await this.$http.get('categories',{params : {type : 3}});
                if(res.meta.status !== 200){
                    return this.$message.error('获取参数失败');
                }
                this.cateList = res.data;
            },
            handleChange(){
                if(this.addForm.goods_cat.length !== 3){
                    this.addForm.goods_cat = [];
                    this.$message.error('只能选中三级分类');
                }
            },
            //到methods编写事件函数beforeTabLeave
            //activeName 当前点击标签的名称   oldActiveName  点击之前的标签的名称
            beforeTabLeave(activeName,oldActiveName){
                //在tab栏切换之前触发,两个形参为切换前,后的tab栏的name
                if(oldActiveName === '0'){
                    //在第一个标签的时候
                    if(this.addForm.goods_cat.length !== 3){
                        this.$message.error('请选择商品分类');
                        return false;
                    }
                }
            },
            //点击tab标签
            async tabClicked(){
                //当用户点击切换tab栏的时候触发
                //获取商品参数
                if(this.activeIndex === '1'){
                    //发送请求获取动态数据
                    const {data : res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'many'}});
                    if(res.meta.status !== 200){
                        return this.$message.error('获取动态参数列表失败');
                    }
                    //在进行数据赋值之前,对动态属性进行处理
                    res.data.forEach(item => {
                        item.attr_vals = !!item.attr_vals ? item.attr_vals.split(',') : [];
                    });
                    console.log(res.data)
                    //将动态参数进行赋值
                    this.manyTableData = res.data;
                }else if(this.activeIndex === '2'){
                    //获取商品属性
                    //发送请求获取静态属性数据
                    const {data : res} = await this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:'only'}});
                    if(res.meta.status !== 200){
                        return this.$message.error('获取静态属性失败');
                    }
                    //获取成功的话,进行赋值操作
                    this.onlyTableData = res.data;
                }
            },
            //点击图片预览
            handlePreview(file){
                //当用户点击图片的时候进行预览的时候执行,处理图片预览
                //形参file就是用户预览的那个文件
                this.previewPath = file.response.data.url;
                //显示预览图片的对话框
                this.previewVisible = true;
            },
            //对图片进行删除操作
            handleRemove(file){
                //当用户点击x号进行删除的时候执行
                //形参file就是用户点击删除的文件
                //获取用户点击删除的时候的那个图片的临时路径
               const filePath = file.response.data.tmp_path;
               //使用findIndex来查找符合条件的索引
                const index = this.addForm.pics.findIndex(item => item.pic === filePath);
                //移除索引对应的图片
                this.addForm.pics.splice(index,1);
                console.log(this.addForm.pics)
            },
            //当图片上传成功
            handleSuccess(response){
                //当上传成功时候触发
                console.log(response)
                //形式参数response就是上传成功之后服务器返回的结果
                //将服务器返回的临时路径保存到addForm表单中的pics数组中
                this.addForm.pics.push({ pic : response.data.tmp_path });
                console.log(this.addForm.pics)
            },
            //编写添加商品按钮绑定点击事件
             btnAdd(){
                //进行表单验证
                this.$refs.addFormRef.validate(async valid => {
                    if(!valid) return this.$message.error('请填写必要的表单项');
                    //将addForm进行深拷贝,避免goods_cat 数组转化为字符串的时候导致联级选择器报错
                    //进行身拷贝，代表的是递归拷贝   不影响之前的数据
                    const form = _.cloneDeep(this.addForm);
                    //将goods_cat从数组转化为“1，2，3”字符串形式
                    form.goods_cat = form.goods_cat.join(',');
                    //处理attrs数组,数组中需要包含商品的动态参数和静态属性
                    //将manyTableData(动态参数) 处理添加到attrs
                    this.manyTableData.forEach(item => {
                        form.attrs.push({attr_id:item.attr_id,attr_value:item.attr_vals.join(',')});
                    });
                    //将onlyTableData(静态参数) 处理添加到attrs
                    this.onlyTableData.forEach(item => {
                        form.attrs.push({attr_id:item.attr_id,attr_value:item.attr_vals});
                    });

                    //发送请求完成商品的添加,商品名称必须是唯一的
                    const {data : res} = await this.$http.post('goods',form);
                    if(res.meta.status !== 201){
                        return this.$message.error('添加商品失败');
                    }
                    this.$message.success('商品添加成功');
                    //编程式导航跳转到商品列表
                    this.$router.push('/goods');
                });


            }

        },
        //添加 计算属性  获取三级分类
        computed : {
            cateId(){
                if(this.addForm.goods_cat.length === 3){
                    return this.addForm.goods_cat[2];
                }
                return null;
            }
        }
    }
</script>

<style scoped>
.el-card{
    margin-top: 10px;
}
.el-steps{
    margin-top: 10px;
}
.el-checkbox{
    margin: 0 0 0 10px!important;
}

.upload-demo{
    margin-top: 20px!important;
}
.previewImg{
    width: 90%;
    margin: auto;
}
    .ql-editor{
        height:500px;
        margin-top: 10px;
    }
    .btnAdd{
        margin-top: 50px;
    }

</style>
